<template>
  <!-- 轮播图 -->
  <swiper
    :slides-per-view="1"
    :space-between="50"
    :navigation="true"
    :modules="modules"
    :autoplay="true"
    :loop="true"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    class="swiperContainer"
  >
    <swiper-slide v-for="(item, index) in imgs" :key="index">
      <img :src="item.pic" :alt="index" class="carouselImg" />
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
import { Navigation, Autoplay } from "swiper";
import "swiper/swiper-bundle.min.css"; // 所有的Swiper样式

import BaseApi from "@/api/index.js";

export default {
  data() {
    return {
      imgs: [
        {
          pic: require("../assets/img/1.jpg"),
        },
        {
          pic: require("../assets/img/2.jpg"),
        },
        {
          pic: require("../assets/img/3.jpg"),
        },
      ],
    };
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper) => {
      // console.log(swiper);
    };
    const onSlideChange = () => {
      // console.log("slide change");
    };
    return {
      onSwiper,
      onSlideChange,
      modules: [Navigation, Autoplay],
    };
  },
  methods: {
    async initImg() {
      let res = await BaseApi.getBanner(1);
      this.imgs = res.data.banners;
    },
  },
  mounted() {
    this.initImg();
  },
};
</script>

<style lang="less" scoped>
.swiperContainer {
  --swiper-navigation-size: 25px !important;
  width: 7.1rem;
  height: 2.7rem;
  border-radius: 8px;
  overflow: hidden;
  .carouselImg {
    width: 100%;
  }
}
</style>
